<template>
  <div class="container">
    <el-card class="box-card" shadow="always">
      <div slot="header" class="header">
        <span>基本信息</span>
        <el-button type="primary" @click="saveAll">保存全部</el-button>
      </div>
      <div class="content">
        <el-form
          :model="paramsListData"
          label-width="100px"
          style="display: flex; flex-wrap: wrap"
        >
          <el-form-item style="width: 34%" label="取数规则名称">
            <el-input v-model="paramsListData.configName" />
          </el-form-item>
          <el-form-item style="width: 50%" label="主题类型">
            <!-- multiple 多选 -->
            <el-select v-model="paramsListData.subType">
              <el-option
                v-for="item in typeData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item style="width: 50%" label="报文协议规则">
            <el-select v-model="paramsListData.agreementCode">
              <el-option
                v-for="item in httpDataType"
                :key="item.agreementCode"
                :label="item.agreementName"
                :value="item.agreementCode"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <di class="comd">
          <div class="tit">报文体内容</div>
          <div class="text"></div>
        </di>
      </div>
    </el-card>
    <div class="content">
      <div class="dev-det com">
        <el-card class="box-card" shadow="always">
          <div slot="header" class="header">
            <span>设备详情</span>
          </div>
          <global-card>
            <template #content>
              <el-button type="primary" size="medium" @click="clickSb()"
                >添加设备</el-button
              >
              <el-table
                :data="tableData2"
                border
                style="width: 100%; height: 380px"
                class="elTable"
                ref="tableRef"
              >
                <el-table-column
                  prop="deviceName"
                  label="设备名称"
                  align="center"
                />
                <el-table-column
                  prop="modelType"
                  label="模型类型"
                  align="center"
                />
                <el-table-column prop="channel" label="通道号" align="center" />
                <el-table-column label="操作" width="300" align="center">
                  <template #default="{ row }">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="clickParams(row)"
                      >参数</el-button
                    >
                    <el-button
                      type="danger"
                      size="mini"
                      @click="handlerDelete(row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </global-card>
        </el-card>
      </div>
      <div class="report com">
        <el-card class="box-card" shadow="always">
          <div slot="header" class="header">
            <span>设备参数详情({{ deviceName || "~" }})</span>
          </div>
          <global-card>
            <template #content>
              <div>
                <el-button
                  type="primary"
                  size="medium"
                  @click="addParams"
                  :disabled="!isShow"
                  >添加参数</el-button
                >
              </div>

              <el-table
                :data="tableData3"
                border
                style="width: 100%; height: 380px"
                class="elTable"
                ref="tableRef"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="80"
                  align="center"
                />
                <el-table-column
                  prop="parameterName"
                  label="参数名称"
                  align="center"
                />

                <el-table-column
                  prop="parameterCode"
                  label="参数代码"
                  align="center"
                />
                <el-table-column label="操作" width="300" align="center">
                  <template #default="{ row }">
                    <el-button
                      type="danger"
                      size="mini"
                      @click="handlerDelete2(row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </global-card>

          <global-message
            v-if="isGlobalMessageShow"
            @receive="receive"
            :message="message"
          />
        </el-card>
      </div>
    </div>
    <yc-dialog ref="ycDialog" dialogTitle="添加设备" centerTitle="添加设备">
      <template #content>
        <el-card class="box-card" shadow="always">
          <div slot="header" class="header">
            <span>设备</span>
          </div>
          <el-table
            :data="tableData1"
            border
            style="width: 100%"
            class="elTable"
            ref="tableRef"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              prop="deviceName"
              label="设备名称"
              align="center"
            />

            <el-table-column prop="modelType" label="模型类型" align="center" />

            <el-table-column prop="createTime" label="通道号" align="center">
              <template #default="{ row }">
                <el-input v-model="row.channel"></el-input></template
            ></el-table-column>
          </el-table>
        </el-card>
      </template>
    </yc-dialog>
    <yc-dialog
      ref="ycDialog2"
      dialogTitle="添加设备参数"
      centerTitle="添加设备参数"
    >
      <template #content>
        <el-card class="box-card" shadow="always">
          <el-table
            :data="tableData4"
            border
            style="width: 100%"
            class="elTable"
            ref="tableRef"
            @selection-change="handleSelectionChange2"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="parameterName" label="名称" align="center" />
            <el-table-column
              prop="parameterCode"
              label="参数代码"
              align="center"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </template>
    </yc-dialog>
  </div>
</template>
<script>
import {
  queryAllAgreement,
  queryPageDevice,
  queryPageDeviceModelParameter,
  insertDeviceConfigMain,
  updateDeviceConfigMain
  // queryPageDeviceModelParameter
} from "@/api/clientOrObject/reportMessage"
import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      newQuipmentModel: {},
      typeData: [
        {
          label: "设备基础数据",
          value: "SX_FD"
        },
        {
          label: "实时数据",
          value: "SX_CD"
        },
        {
          label: "异常数据",
          value: "SX_ED"
        },
        {
          label: "状态数据",
          value: "SX_SD"
        },
        {
          label: "更改设备开关",
          value: "XX_OF"
        },
        {
          label: "更改设备参数值",
          value: "XX_CD"
        }
      ],
      isGlobalMessageShow: false,
      message: "",
      pageIndex: 1,
      pageSize: 20,
      queryObj: {},
      httpDataType: [],
      tableData1: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      deviceName: "",
      lDeviceSedModelList: [],
      modelCode: "" /* 备用 */,
      listObj: {},
      isShow: false,
      paramsListData: {}
    }
  },
  components: {
    ycDialog
  },
  created() {
    this.paramsListData = { ...this.$route.query }
    // this.paramsListData = .JSON.parse()
    this.tableData2 = this.paramsListData.choseDeviceList
    console.log(this.tableData2, " this.tableData2")

    this.queryPageDevice()
    this.queryAllAgreement()
  },
  methods: {
    handlerDelete(row) {
      this.tableData2 = this.tableData2.filter(
        (e) => e.deviceCode != row.deviceCode
      )
    },
    handlerDelete2(row) {
      console.log(this.listObj.parameters, "this.listObj.parameters", row)
      this.tableData3 = this.tableData3.filter(
        (e) => e.parameterCode != row.parameterCode
      )
      this.listObj.parameters = [...this.tableData3]
    },
    saveAll() {
      this.paramsListData = {
        ...this.paramsListData,
        choseDeviceList: this.tableData2,
        deviceCode: this.$route.query.deviceCode
      }
      if (this.$route.query.id) {
        updateDeviceConfigMain({
          updateJsonConfig: JSON.stringify(this.paramsListData)
        }).then((e) => {
          if (e.status == 200) {
            this.isGlobalMessageShow = true
            this.$router.go(-1)
          } else {
            this.message = "error"
          }
        })
        console.log(this.paramsListData, "this.paramsListData")
      } else {
        insertDeviceConfigMain({
          addJsonConfig: JSON.stringify(this.paramsListData)
        }).then((e) => {
          if (e.status == 200) {
            this.isGlobalMessageShow = true
            this.$router.go(-1)
          } else {
            this.message = "error"
          }
        })
        console.log(this.paramsListData, "this.paramsListData")
      }
    },
    addParams() {
      queryPageDeviceModelParameter({
        pageIndex: 1,
        pageSize: 100
      }).then((data) => {
        this.tableData4 = data.object.data
      })
      this.$refs.ycDialog2.dialogVisible = true
    },
    clickParams(row) {
      this.tableData3 = row.parameters || []
      this.deviceName = row.deviceName
      // this.modelCode = row.modelCode
      this.listObj = row
      // this.lDeviceSedModelList = row.lDeviceSedModelList || []
      if (!row.lDeviceSedModelList?.length) {
        this.isShow = true
      }
    },
    clickSb() {
      this.$refs.ycDialog.dialogVisible = true
    },
    handleSelectionChange2(data) {
      this.tableData3 = [...data]
      this.listObj.parameters = [...this.tableData3]
    },
    handleSelectionChange(data) {
      this.tableData2 = [...data]
    },
    async queryPageDevice() {
      const data = await queryPageDevice({
        pageIndex: 1,
        pageSize: 100,
        deviceType: "0"
      })
      this.tableData1 = data.object.data
      console.log(data, "data")
    },
    async queryAllAgreement() {
      const data = await queryAllAgreement()
      this.httpDataType = data.object
      console.log(this.httpDataType, "this.httpDataType")
    },
    goBack() {
      this.$router.go(-1)
    },

    receive() {
      this.isGlobalMessageShow = false
    },

    pagination(pageItem) {
      this.getPageProject(pageItem.page, pageItem.limit)
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .box-card {
    .header {
      display: flex;
      justify-content: space-between;
      span {
        font-weight: 800;
        font-size: 20px;
      }
    }
    .content {
      display: flex;
      padding: 0 20px;
      .comd {
        .tit {
          font-weight: 600;
          font-size: 20px;
          margin-bottom: 10px;
        }
        .text {
          width: 600px;
          height: 140px;
          border: 1px solid #cbcbcb;
          overflow-y: hidden;
        }
      }
    }
    .mx-ms {
      padding: 0 20px;
      font-weight: 600;
      font-size: 18px;
      span {
        font-weight: 400;
      }
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    .com {
      width: 50%;
      height: 700px;
      // overflow-y: scroll;
      padding: 20px;
    }
  }
}
</style>
